<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<div class="component-title">{{moduleData.label_name_cn}}</div>
        	<div class="component-desc">{{moduleData.label_info_summary}}</div>
        	<div class="card-wrapper disFlex">
        		<div class="card-left disFlex vertical">
        			<div class="talent-info disFlex">
        				<img :src="moduleData.data[0].talentData.author_portrait">
        				<div class="talent-info-detail disFlex vertical">
        					<p>{{moduleData.data[0].talentData.author_name}}</p>
        					<p>{{moduleData.data[0].talentData.author_tag}}</p>
        				</div>
        			</div>
        			<div class="talent-content elip-2">{{moduleData.data[0].poetry}}</div>
        			<div class="talent-from">——{{moduleData.data[0].poetry_from}}</div>
        		</div>
        		<div class="card-right">
        			<div class="bgCover img" :style="`background-image: url('${moduleData['data'][0].image_url}');`"></div>
        		</div>
        	</div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'TalentModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
          curpage: 0,
          weekArray: ["一","二","三","四","五","六","日"]
    	}
    },
    methods: {
    	delModule() {
        this.$emit("delModule",this.moduleData);    
    	}
    },
    created() {
       
    },
    computed: {
      topTitle: function() {
        var date = new Date(this.moduleData.data[0].time*1000);
        return "星期"+this.weekArray[date.getDay()-1];
      },
      subTitle: function() {
        var date = new Date(this.moduleData.data[0].time*1000);
        var month = date.getMonth() + 1;
        month = month < 10 ? ("0" + month) : month;
        var day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();   
        var hour = date.getHours();
        hour = hour < 10 ? ("0" + hour) : hour;             
		var min = date.getMinutes();
		min = min < 10 ? ("0" + min) : min;             
        return (month+"月"+day+"日"+" "+hour+":"+min);  
      }
    },
    components: {
	}
 }
</script>

<style scoped>
@import url("../baseModule.less");
	
	.card-wrapper {
		height: 140px;
		box-shadow: 0 0 5px #DCDCDC;
		border-radius: 10px;
		overflow: hidden;
	}
   	.card-left {
   		padding: 12px;
   		flex: 1;
   		justify-content: space-around;
   	}
   	.talent-info img {
   		width: 30px;
   		height: 30px;
   		border-radius: 50%;
   	    margin-right: 8px;
   	}
   	.talent-info-detail p:last-child {
   		background: #ffd608;
	    color: #333;
	    line-height: 1.1;
	    padding: 5px 10px;
	    border-radius: 50px;
	    transform: scale(0.7);
	    text-align: center;
	    transform-origin: left;
   	}
   	.talent-from {
   		text-align: right;
   	}
   	.card-right {
   		width: 40%;
   		height: 100%;
    	margin-left: 12px;
   	}
   	.card-right .img {
   		width: 100%;
   		height: 100%;
   	}

</style>
